<template>
  <div class="shop app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="false" titelText="记录"></header-nav>
    </div>
    <div class="chart" v-if="records.length">
      <div id="main" style="width: 400px; height: 160px"></div>
    </div>

    <div class="weight" v-if="records.length">
      <div class="title" @click="toWeightDetail">
        体重记录<van-icon name="arrow" />
      </div>
      <div id="line" style="width: 380px; height: 120px"></div>
    </div>
    <div class="weight" v-if="records.length">
      <div class="title" @click="toDetail">
        腰围记录
      </div>
      <div id="line2" style="width: 380px; height: 120px"></div>
    </div>
    <van-empty v-if="records.length == 0" description="暂无记录，请添加" />
    <div class="fix" @click="toDetail">新增</div>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Record">
import { showNotify } from "vant";
import moment from "moment";
import * as echarts from "echarts";
import { showToast } from "vant"; // 引入提示组件

import { getRecord, addRecord, updateRecord } from "@/api/http.js";

const router = useRouter();
let records = ref([]); // 是否全选
let info = reactive({
  show: false,
  userInfo: {},
  show: false,
  showCld: false,
});

let form = reactive({
  time: "请选择日期",
  weight: "",
  foodin: "",
});

// 新增
const onSubmit = () => {
  info.show = true;
};

const showC = () => {
  info.showCld = true;
};

const onConfirm = (data) => {
  form.time = moment(data).format("YYYY-MM-DD");
  info.showCld = false;
};

const toDetail = () => {
  router.push("/recordInfo");
};

const toWeightDetail = () => {
  router.push("/weightInfo");
}

const add = () => {
  console.log(form);
  if (form.time == "请选择日期") {
    return;
  }
  if (form.time && form.weight && form.foodin) {
    let row = records.value.find((v) => v.time == form.time);
    if (row) {
      updateRecord({
        ...row,
        ...form,
      }).then((res) => {
        if (res.code == "200") {
          info.show = false;
          getData();
        }
      });
    } else {
      addRecord({
        ...form,
        userid: info.userInfo.id,
      }).then((res) => {
        if (res.code == "200") {
          info.show = false;
          getData();
        }
      });
    }
  }
};
const renderPie = () => {
  setTimeout(() => {
    let myChart = echarts.init(document.getElementById("main"));
    let option = {
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },
      series: [
        {
          name: "Pressure",
          type: "gauge",
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#464646",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            distance: 50,
          },
          pointer: {
            show: false,
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10,
          },
          detail: {
            valueAnimation: true,
            formatter: "{value}",
            fontSize: 20,
          },
          data: [
            {
              value: records.value[0].weight,
              name: "最新体重(公斤)",
              detail: {
                offsetCenter: ["0%", "-30%"],
              },
            },
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }, 100);
};
const renderLine = () => {
  setTimeout(() => {
    let value = records.value.sort((a, b) => {
      return moment(a.time).valueOf() - moment(b.time).valueOf();
    });
    let myChart = echarts.init(document.getElementById("line"));
    let option = {
      xAxis: {
        type: "category",
        data: value.map(v => v.time),
      },
      tooltip: {
        trigger: 'axis'
      },
      yAxis: {
        type: "value",
      },
      grid: {
        bottom: "20px",
        top: "20px",
      },
      series: [
        {
          data: value.map(v => v.weight),
          type: "line",
          smooth: true,
        },
      ],
    };
    myChart.setOption(option);
    
    let myChart2 = echarts.init(document.getElementById("line2"));
    let option2 = {
      xAxis: {
        type: "category",
        data: value.map(v => v.time),
      },
      tooltip: {
        trigger: 'axis'
      },
      yAxis: {
        type: "value",
      },
      grid: {
        bottom: "20px",
        top: "20px",
      },
      series: [
        {
          data: value.map(v => v.waist),
          type: "line",
          smooth: true,
        },
      ],
    };
    myChart2.setOption(option2);
  }, 100);
};
const getData = () => {
  getRecord(info.userInfo.id).then((res) => {
    records.value = res.data.sort((a, b) => {
      return moment(b.time).valueOf() - moment(a.time).valueOf();
    });
    if (records.value.length) {
      renderPie();
      renderLine();
    }
  });
};

onMounted(() => {
  console.log(111);
  if (localStorage.getItem("appUserInfo")) {
    info.userInfo = JSON.parse(localStorage.getItem("appUserInfo"));
    getData();
  }
});
</script>

<style lang="less" scoped>
.records {
  padding: 0 12px;
}
.flex-center {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  border-bottom: 1px solid lightgray;
  padding: 12px 0;
  div {
    flex: 1;
    text-align: center;
  }
}
.fix {
  position: fixed;
  bottom: 60px;
  right: calc(50% - 30px);
  font-size: 14px;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: red;
  border-radius: 6px;
  color: #fff;
}
.chart {
  width: 94%;
  margin: 12px 3%;
  display: flex;
  background: #fff;
  #main {
    margin: auto;
  }
}
.weight {
  width: 88%;
  margin: 12px 3%;
  background: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 12px;
  .title {
    width: 100%;
  }
}
.shop {
  background: #f7f7f7;
}
</style>
